{% extends "base.html" %}
{% block page_title %}{{ html_title }}{% endblock %}
{% block head %}
{% autoescape off %}
<script>
    var domainData = {{ domain_data_json }};
    var nextChapter = "/{{ language_code }}/{{ next_chapter }}";
    var previousChapter = "/{{ language_code }}/{{ previous_chapter }}";
    var backChapter = "/{{ language_code }}/{{ back_chapter }}";
    var tutorialData = {{ tutorial_data_json }};
</script>
{% endautoescape %}
<script src="/static/js/learnpython.js"></script>
{% endblock %}

{% block title %}{% if tutorial_page %}{{ page_title }} - {% endif %}Learn {{ domain_data.language_uppercase }} - Free
    Interactive {{ domain_data.language_uppercase }} Tutorial{% endblock %}
{% block ogtitle %}{% if tutorial_page %}{{ page_title }} - {% endif %}Learn {{ domain_data.language_uppercase }} - Free
    Interactive {{ domain_data.language_uppercase }} Tutorial{% endblock %}
{% block ogurl %}{{ domain_data.full_url }}{% if tutorial_page %}/{{ path }}{% endif %}{% endblock %}

{% block content %}
<div class="container" id="main">
    <div class="row">
        <div class="col-12">
            <div class="d-none d-lg-block">
            {% if domain_data.language == "javascript" %}
            <a href="https://coddy.tech/landing/javascript?from=learn-js.org" target="_blank">
                <img src="/static/img/banners/coddy/coddy-billboard-js.png" style="width: 100%; margin-bottom: 10px"/>
            </a>  
            {% else %}
            <a href="https://codingforkids.io?utm_source=learnpython&utm_medium=banner&utm_campaign=cfk-learnpython&utm_id=learnpython" target="_blank">
              <img src="/static/img/banners/cfk/cfk-billboard.png" style="width: 100%; margin-bottom: 10px"/>
            </a>
            {% endif %}

{#                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>#}
{#                <!-- Interactive Tutorials Top -->#}
{#                <ins class="adsbygoogle"#}
{#                     style="display:block"#}
{#                     data-ad-client="ca-pub-3723950136133694"#}
{#                     data-ad-slot="2345161899"#}
{#                     data-ad-format="auto"#}
{#                     data-full-width-responsive="true"></ins>#}
{#                <script>#}
{#                     (adsbygoogle = window.adsbygoogle || []).push({});#}
{#                </script>#}
            </div>

{#            <div class="mb-3">#}
{#                <a href="https://chrome.google.com/webstore/detail/technews/babfhcgjchdmjknpmbdpcfggaonhimlj" target="_blank"><img src="/static/img/banners/technews-banner-wide.png" style="width: 100%"/></a>#}
{#            </div>#}

            {% if page_title %}
                <ul class="breadcrumb" style="margin-top: 10px">
                    {% if back_chapter %}
                        <li><a href="/{{ language_code }}/{{ back_chapter }}">{{ back_chapter }}</a> <span
                                class="divider mr-1">/</span></li>
                    {% endif %}
                    <li class="active">{{ page_title }}</li>
                </ul>
            {% endif %}

        </div>

    </div>

    <div class="row mt-3">

        <div class="col col-lg-10">
            {% if domain_data.language == "sql" %}
                {% if page_title in ["Hello, World!", "Selecting data", "Creating tables"] %}
                    <p>To discover more interactive courses and gain hands-on experience in SQL, get started with DataCamp's free <a href="https://datacamp.pxf.io/5gjDNn?sharedId=learnsqlonline.org">Introduction to SQL</a> tutorial. Learn Data Science by completing interactive coding challenges and watching videos by expert instructors. <a href="https://datacamp.pxf.io/Kjxv6a?sharedId=learnsqlonline.org">Start Now!</a></p>
                {% elif page_title in ["Inserting rows", "Updating rows", "Deleting rows"] %}
                    <p>To discover more intermediate courses and gain hands-on experience in SQL, register to DataCamp's <a href="https://datacamp.pxf.io/m5nmQ7?sharedId=learnsqlonline.org">Intermediate SQL</a> tutorial. Learn Data Science by completing interactive coding challenges and watching videos by expert instructors. <a href="https://datacamp.pxf.io/Kjxv6a?sharedId=learnsqlonline.org">Start Now!</a></p>
                {% elif page_title in ["Joining tables", "Group by", "Aggregate functions"] %}
                    <p>To discover more courses about data manipulation and SQL functions, register to DataCamp's <a href="https://datacamp.pxf.io/DKLN45?sharedId=learnsqlonline.org">SQL</a> tutorials. Learn Data Science by completing interactive coding challenges and watching videos by expert instructors. <a href="https://datacamp.pxf.io/Kjxv6a?sharedId=learnsqlonline.org">Start Now!</a></p>
                {% elif page_title in ["The HAVING statement", "Distinct queries", "Order by"] %}
                    <p>To discover more intermediate to advanced SQL courses, register to DataCamp's <a href="https://datacamp.pxf.io/eKR5Wg?sharedId=learnsqlonline.org">SQL</a> tutorials. Learn Data Science by completing interactive coding challenges and watching videos by expert instructors. <a href="https://datacamp.pxf.io/Kjxv6a?sharedId=learnsqlonline.org">Start Now!</a></p>
                {% elif "<h1>Welcome</h1>" in text %}
                    <p>Get started learning SQL with DataCamp's free <a href="https://datacamp.pxf.io/5gjDNn?sharedId=learnsqlonline.org">Introduction to SQL</a> tutorial. Learn Data Science by completing interactive coding challenges and watching videos by expert instructors. <a href="https://datacamp.pxf.io/Kjxv6a?sharedId=learnsqlonline.org">Start Now!</a></p>
                    <p>This site is generously supported by <a href="https://datacamp.pxf.io/Kjxv6a?sharedId=learnsqlonline.org">DataCamp</a>. DataCamp offers online interactive <a href="https://datacamp.pxf.io/eKR5Wg?sharedId=learnsqlonline.org">SQL Tutorials</a> for Data Science. Join 11+ million other learners and get started learning <a href="https://datacamp.pxf.io/eKR5Wg?sharedId=learnsqlonline.org">SQL for data science</a> today.</p>
                    <p>Good news! You can save 25% off your Datacamp annual subscription with the code <a href="https://datacamp.pxf.io/Y9Nz7R">LEARNPYTHON23ALE25 - Click here to redeem your discount!</a></p>
                {% endif %}
            {% endif %}

            <div id="inner-text">{% autoescape off %}
                {% if page_title %}
                    <h1>{{ page_title }}</h1>
                    <hr/>
                {% endif %}
                {{ text }}
            {% endautoescape %}</div>

            <div class="row mt-2">
                <div class="col">
                    <button id="start-exercise" class="btn btn-success pull-left mt-2" onclick="reset()">
                        <i class="fas fa-play"></i> Start Exercise
                    </button>
                </div>
            </div>

            <hr/>

            <div class="row mt-2 mb-2">
                <div class="col">
                    {% if previous_chapter %}
                        <a class="btn btn-primary pull-left" href="/{{ language_code }}/{{ previous_chapter }}">
                            <i class="fas fa-angle-double-left"></i> Previous Tutorial
                        </a>
                    {% endif %}


                    {% if next_chapter %}
                        <a class="btn btn-primary pull-right" href="/{{ language_code }}/{{ next_chapter }}">
                            Next Tutorial <i class="fas fa-angle-double-right"></i>
                        </a>

                    {% endif %}
                </div>
            </div>

            <div class="row mt-2">
                <div class="col">
                {% if domain_data.language == "javascript" %}
                    <a href="https://coddy.tech/landing/javascript?from=learn-js.org" target="_blank">
                        <img src="/static/img/banners/coddy/coddy-billboard-js.png" style="width: 100%; margin-bottom: 10px"/>
                    </a>
                {% else %}
                    <a href="https://codingforkids.io?utm_source=learnpython&utm_medium=banner&utm_campaign=cfk-learnpython&utm_id=learnpython" target="_blank">
                        <img src="/static/img/banners/cfk/cfk-billboard.png" style="width: 100%; margin-bottom: 10px"/>
                    </a>
                {% endif %}

{#                    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>#}
{#                    <!-- Interactive Tutorials Bottom -->#}
{#                    <ins class="adsbygoogle"#}
{#                         style="display:block"#}
{#                         data-ad-client="ca-pub-3723950136133694"#}
{#                         data-ad-slot="6124145877"#}
{#                         data-ad-format="auto"#}
{#                         data-full-width-responsive="true"></ins>#}
{#                    <script>#}
{#                         (adsbygoogle = window.adsbygoogle || []).push({});#}
{#                    </script>#}
                </div>
            </div>

        </div>

        <div class="col-2 d-none d-lg-block mt-2">
            <div id="google-ad-right">
                {% if domain_data.language == "sql" %}
                    <iframe src="https://learnsqlonline-ads.datacamp.com/?page={{page_title}}&language={{language_code}}" frameborder="0" width="160" height="600" scrolling="no" allowtransparancy="true" style="margin-bottom: 10px; border: 0;"></iframe>
                {% endif %}

                <h4>Sponsors</h4>
                <hr/>
{#                <div class="mt-3">#}
{#                    <a href="http://onelink.to/5tw9ex"><img src="/static/img/banners/typetap-banner.png" target="_blank"></a>#}
{#                </div>#}
                <div class="mt-3">
                {% if domain_data.language == "javascript" %}
                 <a href="https://coddy.tech/landing/javascript?from=learn-js.org" target="_blank">
                    <img src="/static/img/banners/coddy/coddy-billboard-long-js.png" style="width: 100%; margin-bottom: 10px"/>
                  </a>
                {% else %}
                  <a href="https://codingforkids.io?utm_source=learnpython&utm_medium=banner&utm_campaign=cfk-learnpython&utm_id=learnpython" target="_blank">
                    <img src="/static/img/banners/cfk/promo_high.png" style="width: 100%; margin-bottom: 10px"/>
                  </a>
                {% endif %}

{#                    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>#}
{#                    <!-- Interactive Tutorials Right -->#}
{#                    <ins class="adsbygoogle"#}
{#                         style="display:inline-block;width:160px;height:600px"#}
{#                         data-ad-client="ca-pub-3723950136133694"#}
{#                         data-ad-slot="5528539062"></ins>#}
{#                    <script>#}
{#                        (adsbygoogle = window.adsbygoogle || []).push({});#}
{#                    </script>#}
                </div>
                <div class="mt-3">
                    <a href="https://digitalocean.com/" target="_blank" >
                        <img src="/static/img/banners/digital-ocean.svg" style="width: 160px" alt="Digital Ocean">
                    </a>
                </div>
                <div class="mt-3">
                    <a href="http://www.spoj.com/?utm_campaign=permanent&utm_medium=banner&utm_source=learnx" target="_blank">
                        <img src="/static/img/logos/spoj.png" style="width: 160px" alt="Sphere Engine">
                    </a>
                </div>
                <div class="mt-3">

                  <a href="#" data-toggle="modal" data-target="#masterschoolModal">
                    <img src="/static/img/masterschool.png" style="width: 150px;"/>
                  </a>
                </div>
                <h4 class="mt-3">Chapters</h4>
                <hr/>
                <div class="mt-2">
                    {% for link, link_href in site_tutorial_links %}
                        <div>
                            <a href="{{ link_href }}">{{ link }}</a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

    </div> <!-- row -->

</div>

{% include "footer.html" %}

<footer id="dock">
    <div class="container">
        <div class="row mb-2">
            <div class="col-sm-12 col-lg-6 mt-3">
                <div class="code-window">
                    <div class="row mb-2">
                        <div class="col-2">
                            <h5>Code</h5>
                        </div>

                        <div class="col-10 text-right">
                            <button id="run-button" class="btn btn-success btn-sm" onclick="execute()">
                                <i class="fas fa-play"></i> Run
                            </button>
                            <button id="reset-button" onclick="reset()" class="btn btn-primary btn-sm">
                                <i class="fas fa-sync-alt"></i> Reset</button>
                            <button id="solution-button" onclick="showSolution()" class="btn btn-primary btn-sm">Solution</button>

                            <button id="toggle-dock-button" class="btn btn-primary btn-sm" onclick="toggleMinimize()">
                                <span class="maximized">
                                    <i class="fas fa-angle-double-down"></i>
                                </span>
                                <span class="minimized">
                                    <i class="fas fa-angle-double-up"></i>
                                </span>
                            </button>

                        </div>
                    </div>

                    <div class="row footer-toggle">
                        <div class="col">
                            <textarea id="code">{{ code }}</textarea>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-sm-12 col-lg-6 mt-3">
                <div class="output-window">
                    <div class="row mb-2">
                        <div class="col-3">
                            <h5>Output</h5>
                        </div>
                        <div class="col-9 text-right">
                            <button id="expected-output-button" class="btn btn-primary btn-sm" onclick="showExpected()">
                                Expected Output
                            </button>

                        </div>

                    </div>
                    <div class="row footer-toggle">
                        <div class="col">
                            <div id="text-output">
                                <textarea id="output"></textarea>
                                <div class="powered-by-sphere">
                                    Powered by <a target="_blank" href="http://sphere-engine.com/">Sphere Engine &trade;</a>
                                </div>
                            </div>
                            <iframe id="html-output"
                                    style="border: 1px solid #ccc; box-sizing: border-box; background-color: white; display: none; height: 200px; width: 100%"></iframe>
                            <iframe id="expected-output"
                                    style="border: 1px solid #ccc; box-sizing: border-box; background-color: white; display: none; height: 200px; width: 100%"></iframe>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

</footer>



{% endblock %}
